【Flutter】Icons 组件 ( FlutterIcon 下载图标 |
您所在的位置：网站首页 › true type字体文件 › 【Flutter】Icons 组件 ( FlutterIcon 下载图标 |
|
文章目录一、FlutterIcon 下载图标二、自定义 svg 图标生成 ttf 字体文件三、使用下载的 ttf 图标文件四、完整代码示例五、相关资源一、FlutterIcon 下载图标 https://www.fluttericon.com/ 可以根据需求挑选合适的 icon 图标 , 生成 ttf 文件 ; 下图中 , 选中需要生成 ttf 字体文件的图标 , 这里选中了前 10 个图标 , 然后点击右上角的 DOWNLOAD 按钮 , 该网站会在后台将这 10 个图标的 SVG 文件打包到 ttf 文件中 , 下载的文件是 flutter-icons-5b92b65c.zip , 后面一串是随机生成的数字 ; 该压缩包中主要有三个文件 , ① ttf 字体文件 : MyFlutterApp.ttf , svg 格式的图标就封装在该文件中 ; ② dart 文件 : Flutter 中使用 ttf 图标的参考 , /// Flutter icons MyFlutterApp /// Copyright (C) 2021 by original authors @ fluttericon.com, fontello.com /// This font was generated by FlutterIcon.com, which is derived from Fontello. /// /// To use this font, place it in your fonts/ directory and include the /// following in your pubspec.yaml /// /// flutter: /// fonts: /// - family: MyFlutterApp /// fonts: /// - asset: fonts/MyFlutterApp.ttf /// /// /// * Material Design Icons, Copyright (C) Google, Inc /// Author: Google /// License: Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) /// Homepage: https://design.google.com/icons/ /// import 'package:flutter/widgets.dart'; class MyFlutterApp { MyFlutterApp._(); static const _kFontFam = 'MyFlutterApp'; static const String? _kFontPkg = null; static const IconData threedee_rotation = IconData(0xe855, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData ac_unit = IconData(0xe856, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_alarm = IconData(0xe857, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_alarms = IconData(0xe858, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_time = IconData(0xe859, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData accessibility = IconData(0xe85a, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData accessible = IconData(0xe85b, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_balance = IconData(0xe85c, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_box = IconData(0xe85d, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_balance_wallet = IconData(0xf008, fontFamily: _kFontFam, fontPackage: _kFontPkg); }③ json 配置文件 : 这个看起来是给前端开发使用的 ; { "name": "", "css_prefix_text": "", "css_use_suffix": false, "hinting": true, "units_per_em": 1000, "ascent": 850, "glyphs": [ { "uid": "2cc10cdba83708a30142016d40519bb9", "css": "threedee_rotation", "code": 59477, "src": "material" }, { "uid": "6a105ad156427b024b633a799e03af7b", "css": "ac_unit", "code": 59478, "src": "material" }, { "uid": "9548f8adbc5e7b2dc94633be2821cd1f", "css": "access_alarm", "code": 59479, "src": "material" }, { "uid": "2b1bcd8b15d35599f6828e4f5eadfa30", "css": "access_alarms", "code": 59480, "src": "material" }, { "uid": "82f44f1094ffd1d78093e76c33cc08cc", "css": "access_time", "code": 59481, "src": "material" }, { "uid": "ad65fa7f0f35e80fe1f1a5afadbc561f", "css": "accessibility", "code": 59482, "src": "material" }, { "uid": "74bc3a2d72aec992ff1e08cfdd986b38", "css": "accessible", "code": 59483, "src": "material" }, { "uid": "5da59f89dd294fa4475a7cdbe3cd3145", "css": "account_balance", "code": 59484, "src": "material" }, { "uid": "cdd836ec082da15e51545f2ea1a37015", "css": "account_balance_wallet", "code": 61448, "src": "material" }, { "uid": "58f376c8c60c911e8cd5a65becb0d932", "css": "account_box", "code": 59485, "src": "material" } ] }二、自定义 svg 图标生成 ttf 字体文件https://www.fluttericon.com/ 中 , 将 SVG 格式的图标拖动到该地址页面的 Custom Icons 区域 , 拖动过程 : 拖动完成后 , 页面中的 Custom Icons 区域会显示这 20 个 SVG 图标 ; 选中这些图标 , 点击 DOWNLOAD 按钮 , 即可下载生成的 ttf 格式的文件 ; 三、使用下载的 ttf 图标文件将 MyFlutterApp.ttf 字体文件拷贝到 Flutter 源码根目录下的 fonts 目录下 , 在 pubspec.yaml 配置文件中配置字体文件 , name: flutter_image_widget description: A new Flutter application. version: 1.0.0+1 environment: sdk: ">=2.1.0 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |